<template>
  <!-- <view @click="goSearch">去搜索</view> -->
  <view>
    <my-search @click.native="goSearch"></my-search>

    <view class="scroll-view-container">
      <!-- 左侧的滚动区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{ height: wh + 'px' }">
        <block v-for="(item1, index) in categoryList" :key="index">
          <view @click="selectCategoryHandler(index)" class="left-scroll-view-item" :class="{ active: index === selectedCategory }">{{ item1.name }}</view>
        </block>
      </scroll-view>

      <!-- 右侧的滚动区域 -->
      <scroll-view class="right-scroll-view" :scroll-top="scrollTop" scroll-y :style="{ height: wh + 'px' }">
        <!-- 动态渲染二级分类的列表数据 -->
        <view class="cate-lv2">
          <view v-for="(item2, index2) in categoryList[selectedCategory].children" :key="index2" @click="gotoProductList(item2)">
            <image :src="item2.image.external_url"></image>
            <view class="cate-lv2-title">{{ item2.name }} </view>
            <!-- 动态渲染三级分类的列表数据 -->
            <!-- <view class="cate-lv3-list">
            <view class="cate-lv3-item" v-for="(item3, index3) in item2.children" @click="gotoProductList(item3)" :key="index3">
              <image :src="item3.image.external_url"></image>
              <text>{{ item3.name }}</text>
            </view>
          </view> -->
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import mySearch from '@/components/my-search.vue'
export default {
  components: { mySearch },
  data() {
    return {
      wh: 0,
      // 1. 分类数据数组
      categoryList: [],
      selectedCategory: 0,
      scrollTop: 0,
    }
  },
  created() {
    // 动态获取窗口可用高度，以便让页面中的左右两块滚动区域的高度撑满屏幕
    // 1. 获取当前系统信息
    const sysInfo = uni.getSystemInfoSync()
    // console.log(sysInfo)
    // 2. 从系统信息中获取窗口可用高度并赋值给 wh
    // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度
    this.wh = sysInfo.windowHeight - 50
    this.getCategoryList()
  },
  methods: {
    // 3. 定义获取分类数据的方法
    async getCategoryList() {
      const {
        data: { list, status },
      } = await this.$http.get('/category/list')
      console.log(list)
      // 请求失败处理
      // if (status !== 200) {
      // return this.$msg()
      // }

      this.categoryList = list
      // console.log(message)
    },
    //改变高亮
    selectCategoryHandler(index) {
      this.selectedCategory = index
      this.scrollTop = this.scrollTop === 0 ? 1 : 0
    },
    //点击商品跳转
    gotoProductList(item2) {
      uni.navigateTo({
        url: `/pages_sub1/product-list/product-list?goodsName=${item2.name}`,
      })
    },
    goSearch() {
      uni.navigateTo({
        url: '/pages_sub1/search/search',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.scroll-view-container {
  display: flex;

  .left-scroll-view {
    width: 240rpx;

    .left-scroll-view-item {
      line-height: 120rpx;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 24rpx;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;

        // 渲染激活项左侧的红色指示边线
        &::before {
          content: ' ';
          display: block;
          width: 6rpx;
          height: 60rpx;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.cate-lv2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  image {
    width: 150rpx;
    height: 150rpx;
  }
  .cate-lv2-title {
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
    padding: 30rpx 0;
  }
}

.cate-lv3-list {
  display: flex;
  flex-wrap: wrap;

  .cate-lv3-item {
    width: 33.33%;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 120rpx;
      height: 120rpx;
    }

    text {
      font-size: 24rpx;
    }
  }
}
</style>
